<template>
	<view class="indexHeader">
		<!-- 状态栏 -->
		<view v-if="showHeader" class="status" :style="{ position: headerPosition,top:statusTop,opacity: afterHeaderOpacity}"></view>
		<!-- 顶部导航栏 -->
		<view v-if="showHeader" class="header" :style="{ position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }">
			<!-- 定位城市 -->
			<view class="addr">
				<view class="icon location"></view>
				{{ city }}
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<input
					placeholder="默认关键字"
					placeholder-style="color:#c0c0c0;"
					@tap="toSearch()"
				/>
				<view class="icon search"></view>
			</view>
			<!-- 右侧图标按钮 -->
			<view class="icon-btn">
				<view class="icon yuyin-home"></view>
				<view class="icon tongzhi" @tap="toMsg"></view>
			</view>
		</view>
		<!-- 占位 -->
		<view v-if="showHeader" class="place"></view>
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box"> 
				<swiper circular="true" autoplay="true">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<navigator open-type="navigate" :url=" '/pages/webview/webview?url='+encodeURI('https://www.baidu.com/')">
								<image :src="swiper.img" />
						</navigator>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view
						class="dots"
						v-for="(swiper, index) in swiperList"
						:class="[currentSwiper >= index ? 'on' : '']"
						:key="index"
					></view>
			</view>
		</view><!-- 轮播图 -->
	</view><!-- indexHeader -->
	<!-- 分类列表 -->
	<view class="category-list">
		<view
			class="category"
			v-for="(row, index) in categoryList"
			:key="index"
			@tap="toCategory(row)"
		>
			<view class="img"><image :src="row.img"></image></view>
			<view class="text">{{ row.name }}</view>
		</view>
	</view><!-- 分类列表 -->
	<!-- 广告图 -->
	<view class="banner"><image src="https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/ed063246-78f0-4f27-b988-ee9a038207ae.jpg"></image></view>
	<!-- Tab 选项卡 -->
	<view class="tabs-box">
		<view class="one-nav" :class ="currentSwiperIndex ==0?'nav-actived':''"  @tap="swiperChange(0)" >推荐</view>
		<view class="one-nav" :class ="currentSwiperIndex ==1?'nav-actived':''"@tap="swiperChange(1)">资讯</view>
	</view>
		<!-- 内容轮播导航实现 -->
		<swiper class="swiper-box" :style=" 'height:'+ swiperSliderHeight " :current="currentSwiperIndex" @animationfinish="swiperSlider">
			<!-- 推荐动态实现 -->
			<swiper-item class="swiper-item">
				<view   class="page-item sns-now">
					<view class="feeds-box">
						<waterfall-sns v-model="InquiryList" ref="waterfall">
							<template v-slot:left="{leftList}">
								<view class="feed-one" v-for="(item, index) in leftList" :key="index">
									
									<navigator open-type="navigate" :url=" '/subpages/InquiryInfo/InquiryInfo?id=' + item._id">
									<view class="u-line-2 feed-title" v-if="!!item.title">{{ item.title }}</view>
										<image class="feed-img" v-if="!!item.img" :src="item.img" mode="widthFix" :lazy-load="true" />
										<view class="feed-info">
											<view class="iview">
												<image class="avatar" :src=" item.avatar" />
												<text class="name u-line-1">{{ item.nickname }}</text>
											</view>
											<view class="iview">
												<view class="ilike" @tap.stop="clickLove(item)">
													<image v-if="item.has_like" src="https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/e79ecce2-c82d-44fc-920d-634a9641db51.png" class="micon" />
													<image v-else src="https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/8e3ce44f-8da7-417c-a9c2-8e19a6bdfe79.png" class="micon" />
													<text class="love-count" v-if="item.like_count>0">{{ item.like_count }}</text>
												</view>
											</view>
										</view>
									</navigator>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="feed-one" v-for="(item, index) in rightList" :key="index">
									<navigator open-type="navigate" :url=" '/subpages/InquiryInfo/InquiryInfo?id=' + item._id">
										<view class="u-line-2 feed-title" v-if="!!item.title">{{ item.title }}</view>
										<image class="feed-img" v-if="!!item.img" :src="item.img" mode="widthFix" :lazy-load="true" />
										<view class="feed-info">
											<view class="iview">
												<image class="avatar" :src=" item.avatar" />
												<text class="name u-line-1">{{ item.nickname  }}</text>
											</view>
											<view class="iview">
												<view class="ilike" @tap.stop="clickLove(item)">
													<image v-if="item.has_like" src="https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/e79ecce2-c82d-44fc-920d-634a9641db51.png" class="micon" />
													<image v-else src="https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/8e3ce44f-8da7-417c-a9c2-8e19a6bdfe79.png" class="micon" />
													<text class="love-count" v-if="item.like_count>0">{{ item.like_count }}</text>
												</view>
											</view>
										</view>
									</navigator>
								</view>
							</template>
						</waterfall-sns>
					</view>
				</view>
			</swiper-item>
			<!-- 资讯列表实现 -->
			<swiper-item class="swiper-item sns-news">
				<view  v-for="(item, index) in newsList" :key="index">
					<navigator class="one-new" open-type="navigate" :url=" '/subpages/campusDetail/campusDetail?id=' + item._id">
						<view class="left">
							<view class="title u-line-2">{{item.title}}</view>
							<view class="uinfo">
								<view class="iview">
									<view class="utime">
										<text class="name">{{ item.author }}</text>
									</view>
								</view>
								<text class="uptime">{{ item.publish_date | timeFormate }}发布</text>
							</view>
						</view>
						<view class="right">
							<image class="pic" v-if="!!item.imgs[0].url" mode="aspectFill" :src="item.imgs[0].url" />
						</view>
					</navigator>
				</view>
				
			</swiper-item>
		
		</swiper>
	</view><!-- 页面 index 相关部分 -->
</template>
 
<script>  
	// 高德地图的方式
	import amap from '../../common/amap-wx.js';    
	// 状态存储的信息
	import feedMixin from '@/mixins/todoFeed.js'
	// 引入 时间日期格式化显示函数
	import timeFrom from '@/tools/timeFrom.js'
	const db = uniCloud.database()
	export default {
		mixins: [feedMixin],
		data() {
			return {
				showHeader:true,
				afterHeaderOpacity: 1,//不透明度
				headerPosition: 'fixed',
				headerTop:null,
				statusTop:null,
				nVueTitle:null,
				city: '北京',
				currentSwiper: 0, // 首部轮播图
				// 轮播图片
				swiperList: [
					{ id: 1, src: 'url1', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/84b4b1b1-7e7f-4880-9741-8522daac635a.jpg' },
					{ id: 2, src: 'url2', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/94aad5a0-b892-4699-80dd-c524934907a3.jpg' },
					{ id: 3, src: 'url3', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/1c135e7c-cc3d-470e-9adc-f4822db401c3.jpg' }
				],
				// 分类菜单
				categoryList: [
					{ id: 1, name: '课程信息', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/c6700516-465c-4490-afa1-7e327cac3314.png', url:'/subpages/courseInfo/courseInfo' },
					{ id: 2, name: '日常询问', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/b34bcc57-45da-448f-8471-775cab052d50.png', url:'/subpages/dailyInquiry/dailyInquiry' },
					{ id: 3, name: '失物招领', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/9cbc6aed-76ae-48d3-9827-35b6f237561b.png', url:'/subpages/lostAndFound/lostAndFound' },
					{ id: 4, name: '跳蚤市场', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/3f65985a-d1d4-42db-a227-e6346b8bc7b5.png', url:'/subpages/fleaFair/fleaFair' },
					{ id: 5, name: '交友信息', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/0cd01fbd-f6ed-4f49-9e8c-236106a59885.png', url:'/subpages/datingInfo/datingInfo' },
					{ id: 6, name: '校园资讯', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/174b8a23-34e6-475a-9ce5-dcae6f4866a4.png', url:'/subpages/campusInfo/campusInfo' },
					{ id: 7, name: '书籍', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/6ac21e2a-d767-45fc-880f-05d31c8f8b59.png',url:'' },
					{ id: 8, name: '笔记', img: 'https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/a1f4b708-09e4-4ab4-862e-6aa52539a7e5.png' ,url:''}
				],
				//当前推荐 资讯 滑动位置 
				currentSwiperIndex : 0,
				// 校园资讯列表
				newsList:[],
				//日常询问列表
				InquiryList:[],
				// 滑动页面轮播器高度
				swiperSliderHeight:'1000px',
				//日常询问轮播器高度
				swiperSliderInquiryHeight: '0px',
				//校园资讯轮播器高度
				swiperSliderNewsHeight: '0px', 
				// 记录滚动所在的位置
				oldInquiryScrollTop: 0,
				oldNewsScrollTop: 0,
				colList: [
				          db.collection("NeuHelper-Posts").where("category_id == '642d7f6ce766bb2975cd4df7'")
						  .field('_id,user_id,category_id,title,like_count,imgs').getTemp(),
				          db.collection('uni-id-users').field('_id,nickname,avatar_file').getTemp()
				        ]
			}
		},
		async onLoad() {
			// 用户点赞一条动态后触发数据更新
			uni.$on('indexLoveChange', item => {
			//	console.log("触发点赞事件")
				this.$refs.waterfall.modify(item._id, "like_count", item.like_count);
				this.$refs.waterfall.modify(item._id, "has_like", item.has_like);
			})
			//更新状态栏
			this.updateStatus()
			//  获取位置信息
			this.getAddres()
			//初始化日常询问信息
			this.getInquiry()
			//初始化校园资讯信息
			this.getNews()
		},
		onPageScroll(e) {
			if(this.currentSwiperIndex == 0)
				this.oldInquiryScrollTop = this.scrollTop
			else 
				this.oldNewsScrollTop = this.scrollTop
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
			this.headerTop = e.scrollTop>=0?null:0;
			this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px';
		},
		// 顶部下拉事件
		onPullDownRefresh() {
			console.log('顶部下拉刷新')
			this.InquiryList = []
			this.$refs.waterfall.clear()
			if (this.currentSwiperIndex === 0) {
			//	this.InquiryList = [] // 清空原始数据
				this.getInquiry()
			} else {
				this.getNews()
			}
		},
		// 底部下拉事件
		onReachBottom() {
			console.log('下拉到底啦')
			// 请求新的数据
			if (this.currentSwiperIndex === 0) {
				this.InquiryList = []
				this.$refs.waterfall.clear()
				this.getInquiry()
			} else {
				this.getNews()
			}
		},
		filters: {
					timeFormate(timeDate) {
						let Time = new Date(timeDate);
						let timestemp = Time.getTime();
						let t = timeFrom(timestemp, "yyyy年mm月dd日");
						return t;
					}
				},
		methods: {
			//更新状态栏
			async updateStatus(){
				// #ifdef APP-PLUS
				this.nVueTitle = uni.getSubNVueById('homeTitleNvue');
				this.nVueTitle.onMessage(res => {
					let type = res.data.type;
					if(type=='focus'){
						this.toSearch();
					}
				});
				this.showHeader = false;
				this.statusHeight = plus.navigator.getStatusbarHeight();
				// #endif
			},
			//初始化日常询问信息
			async getInquiry(){
				const temp1 = db.collection("NeuHelper-Posts").where("category_id == '642d7f6ce766bb2975cd4df7'")
				.field('_id,user_id,category_id,title,like_count,imgs').getTemp()
				const temp2 = db.collection('uni-id-users').field('_id,nickname,avatar_file').getTemp()
				let dataPost = await db.collection(temp1,temp2).orderBy("publish_date desc").get()
				dataPost = dataPost.result.data 
			//	console.log("推荐数据：")
			//	console.log(dataPost)
				// 喜欢的帖子
				const db2 =  uniCloud.databaseForJQL()
				let LikeList  = await  db2.collection("NeuHelper-LikePosts").where("user_id== $cloudEnv_uid ")
				.field('post_id').get()
				LikeList = LikeList.data
			//	console.log(LikeList)		
				var mp = new Map()
				for(var i = 0 ; i < LikeList.length ; ++i)mp.set(LikeList[i].post_id,true)
				for(var i=0; i < dataPost.length ; ++i){
					let likeBool = mp.has(dataPost[i]._id)
					this.InquiryList.push({
						_id:dataPost[i]._id,
						title:dataPost[i].title,
						img:'',
						avatar:dataPost[i].user_id[0].avatar_file.url,
						nickname:dataPost[i].user_id[0].nickname,
						like_count:dataPost[i].like_count,
						has_like:likeBool,
						post_user_id:dataPost[i].user_id[0]._id // 发布帖子的用户ID
					})
					if(dataPost[i].imgs[0] != undefined) this.InquiryList[i].img = dataPost[i].imgs[0].url;
				}
			//	console.log("最终数据")
			//	console.log(this.InquiryList)
				uni.$on("swiperHeightChange",height =>{
					console.log('瀑布计算出来轮播器高度为: '+height)
					this.swiperSliderInquiryHeight = height
					this.swiperSliderHeight = height
				})
			},
			// 页面滑动左右分页的时候实现的效果
			swiperSlider(event) {
				if (event.detail.current === 0) {
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldFeedsScrollTop, //滚动到目标位置
					})
				} else {
					this.swiperSliderHeight = this.swiperSliderNewsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldNewsScrollTop, //滚动到目标位置
					})
				}
				this.currentSwiperIndex = event.detail.current
			},
			//初始化校园资讯信息
			async getNews(){
				const db2 =  uniCloud.database()
				const ListNew  = await  db2.collection("NeuHelper-Posts").where("category_id == '642d7f6ce766bb2975cd4dfb'")
				.field('_id,category_id,title,like_count,imgs,author').get()
				this.newsList = ListNew.result.data
			//	console.log(this.newsList)
			//	this.newsList =[...this.newsList,...news] 
				this.swiperSliderNewsHeight = (this.newsList.length*95+100)+"px"
				// 需要更新高度，否则无法显示追加的资讯
				this.swiperSliderHeight = this.swiperSliderNewsHeight
			},
			// 获取位置信息
			async getAddres(){
				this.amapPlugin = new amap.AMapWX({
					//高德地图KEY，随时失效，请务必替换为自己的KEY，参考：http://ask.dcloud.net.cn/article/35070
					key: 'f5e3562ff4f8e2a97d21efb523c3ff1d'
				});
				//定位地址
				this.amapPlugin.getRegeo({
					success: data => {
						this.city = data[0].regeocodeData.addressComponent.city.replace(/市/g, ''); //把"市"去掉
					}
				});
			},
			// 点击按钮实现切换效果
			swiperChange(index) {
				if (index === 0) {
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldFeedsScrollTop, //滚动到目标位置
					})
				} else {
					this.swiperSliderHeight = this.swiperSliderNewsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldNewsScrollTop, //滚动到目标位置
					})
				}
				this.currentSwiperIndex = index
			},
			//跳转到功能模块页面
			toCategory(e){
				uni.navigateTo({
					url:e.url
				})
			}
		}
	}
</script>

<style lang="scss">
	page{position: relative;background-color: #fff;}
	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
			format('woff2');
	}
	.pullDown-effects{
		position: fixed;
		//top: calc(100upx - 36vw);
		top: 0;
		z-index: 9;
		width: 100%;
		height: 36vw;
		/*  #ifdef  APP-PLUS  */
		padding-top: var(--status-bar-height);
		/*  #endif  */
		image{
			width: 100%;
			height: 36vw;
		}
	}
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
	
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
	
		.addr {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 28upx;
			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}
		.input-box {
			width: 100%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;
			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}
			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
			}
		}
		.icon-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			.icon {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}
	}
	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
	// 轮播图
	.swiper {
		width: 100%;
		margin-top: 10upx;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 92%;
			height: 30.7vw;
	
			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			swiper {
				width: 100%;
				height: 30.7vw;
				swiper-item {
					image {
						width: 100%;
						height: 30.7vw;
					}
				}
			}
			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;
					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}
	// 模块列表
	.category-list {
		width: 92%;
		margin: 0 4%;
		padding: 0 0 30upx 0;
		border-bottom: solid 2upx #f6f6f6;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.category {
			width: 25%;
			margin-top: 50upx;
			display: flex;
			flex-wrap: wrap;
			.img {
				width: 100%;
				display: flex;
				justify-content: center;
				image {
					width: 9vw;
					height: 9vw;
				}
			}
			.text {
				margin-top: 16upx;
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 24upx;
				color: #3c3c3c;
			}
		}
	}
	.banner {
		width: 92%;
		margin: 40upx 4%;
		image {
			width: 100%;
			height: 20vw;
			border-radius: 10vw;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.3);
		}
	}
	// 推荐、咨询 按钮样式
	
	.tabs-box {
		width: 750upx;
		position: absolute;
		z-index: 1;
		left: 0;
	//	top: 480upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	
		.one-nav {
			height: 80upx;
			width: 110upx;
			color: #9B9B9B;
			font-size: 36upx;
			text-align: center;
			font-weight: blod;
	
			&.nav-actived {
				color: #0050FF;
			}
		}
	}
	
	// 此刻 栏目样式\
	.swiper-box {
		background-color: #f1f1f1;
		padding: 60upx 0 40upx;
	}
	
	.sns-now {
	
		// 动态相关瀑布流样式
		.feeds-box {
			width: 735upx;
			margin-left: 13upx;
			padding-bottom: 20upx;
	
			.feed-one {
				width: 358upx;
				margin-bottom: 12upx;
				background-color: #FFF;
				border-radius: 20upx;
	
				position: relative;
	
				.feed-img {
					width: 358upx;
					height: 200upx;
					border-radius: 10upx;
				}
	
				.feed-title {
					width: 350upx;
					margin-top: 15upx;
					margin-left: 10upx;
					font-size: 28upx;
					line-height: 40upx;
					color: #001432;
					text-align: left;
				}
	
				.feed-info {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 10upx;
					font-size: 20upx;
					color: #666;
					padding: 0 10upx 16upx;
	
					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;
	
						.ilike {
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							justify-content: space-between;
							align-items: center;
							align-content: center;
							height: 60upx;
							padding: 0 10upx;
							background-color: #FFFFFF;
						}
					}
	
					.avatar {
						margin-right: 10upx;
						height: 40upx;
						width: 40upx;
						border-radius: 50%;
						border: 1upx solid #eee;
					}
	
					.name {
						max-width: 120upx;
						color: #757474;
					}
	
					.micon {
						width: 32upx;
						height: 28upx;
					}
	
					.love-count {
						padding-left: 10upx;
						color: #757474;
					}
				}
			}
		}
	}
	
	// 轮播页面 资讯
	.sns-news {
		background-color: #fff;
		width: 750upx;
	
		.one-new {
			width: 700upx;
			height: 74px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: flex-start;
			align-content: center;
			padding-bottom: 10px;
			padding-top: 10px;
			padding-left: 25upx;
			padding-right: 25upx;
			border-bottom: 1px solid #f1f1f1;
	
			.left {
				width: 490upx;
				height: 140upx;
				text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
	
				.title {
					font-size: 30upx;
					line-height: 42upx;
					color: #001432;
					margin-top: 21upx;
				}
	
				.uinfo {
					width: 490upx;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 6upx;
					font-size: 20upx;
					color: #999;
	
					.utime {
						font-size: 24upx;
	
						.name {
							max-width: 120upx;
							color: #777;
						}
					}
				}
			}
	
			.right {
				width: 120upx;
	
				.pic {
					width: 120upx;
					height: 120upx;
					margin-top: 20upx;
					border-radius: 6upx;
				}
			}
		}
	}
	
</style>
